<template>
  <div>
    <el-carousel :interval="4000" type="card" height="300px">
      <el-carousel-item v-for="(item, index) in carousel" :key="index">
        <div class="carousel-image-container" :style="{ backgroundImage: 'url(' + item + ')' }"></div>
      </el-carousel-item>
    </el-carousel>


    <div class="container">
      <!-- 单独的盒子区域 -->
      <div class="box" @click="handleBoxClick(0)">
        <img src="@/assets/carousel/1.png" alt="Box 1" class="box-image" />
        <h1>病 友 圈</h1>
      </div>

      <div class="box" @click="handleBoxClick(1)">
        <img src="@/assets/carousel/2.png" alt="Box 2" class="box-image" />
        <h1>在线问诊</h1>
      </div>

      <div class="box" @click="handleBoxClick(2)">
        <img src="@/assets/carousel/3.png" alt="Box 3" class="box-image" />
        <h1>常见疾病</h1>
      </div>

      <div class="box" @click="handleBoxClick(3)">
        <img src="@/assets/carousel/4.png" alt="Box 4" class="box-image" />
        <h1>医药商城</h1>
      </div>
    </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  import Hamburger from "@/components/Hamburger/index.vue";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {Hamburger},
    props: {},
    data() {
      //这里存放数据"

      return {
        carousel: [
          require('@/assets/carousel/001.png'),
          require('@/assets/carousel/002.png'),
          require('@/assets/carousel/003.png'),
          require('@/assets/carousel/004.png')
        ],
      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      handleBoxClick(index) {
        console.log(`Clicked on Box ${index + 1}`);
        // 在这里添加具体的点击事件逻辑
        // 可能会触发跳转、显示详情或其他操作
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {


    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
}

.box {
  width: 20%;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 20px;
}

.box-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-carousel__item img {
  object-fit: cover; /* 或者使用 'contain' 使图片适应容器大小而不变形 */
  width: 90%;
  height: 90%;
}
.carousel-image-container {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* 或者 background-size: 100% 100%; 以达到平铺填充效果 */
  position: relative;
}

.box {
  position: relative; /* 添加相对定位，以便子元素（文本）可以根据此元素进行定位 */
}

.box h1 {
  font-family: "宋体", "SimSun", serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 30px;
  width: 100%;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 1;
  color: #1e1e1e;
  /* 让文本在图片之上 */
  margin: 0; /* 清除默认的顶部外边距，确保完全居中 */
}
</style>
